
import lessModule from "./index.module.less"
import HomePage_ModalComponent_NormalFooterComponent from "../../../../../../component/modal/component/normalFooter"
import HomePage_ModalComponent_HeaderNormalComponent from "../../../../../../component/modal/component/headerNormal"
import HomePage_ModalComponent_NormalFormComponent from "../../../../../../component/modal/component/normalForm"
import { FormInstance } from "antd/lib"
import { Form, message, } from "antd"
import { useEffect, useRef, useState } from "react"
import { $EventBus_off, $EventBus_on } from "../../../../../../../../common/utils"
import { $Http } from "../../../../../../../../network"
import HomePage_ModalComponent_SelectMonitorModalComponent from "../../../../../../component/modal/component/selectMonitorModal"
import { format } from "path"

// 主页-数据维护页面-定检数据维护页面-新增或编辑弹窗组件
interface componentInterface {
    change_cancel: Function
}
const HomePage_StatisticalQueryPage_AssessmentReportPage_AddModalComponent: React.FC<componentInterface> = (props) => {
    const [form] = Form.useForm()
    const paramsData = useRef<object>({})
    const [isMonitoringTypeError, setIsMonitoringTypeError] = useState<boolean>(false)
    const formItemList = [
        {
            label: "选择时间范围",
            key: "dateTime",
            width: "100%",
            type: "dateTimePickerRange",
            format:"YYYY-MM-DD HH:mm:ss",
            monitoringType: "站点",
            monitorModalName: "请选择安装站点",
            placeholder: "请选择安装站点",
            isRequire: true,
        },
    ]

    const change_selectedOtherList = (list: Array<object>) => {
        paramsData.current["stationID"] = list[0]["id"]
        setIsMonitoringTypeError(false)
    }

    // 广播函数数据
    const eventBusFuncData = {
        // 提交操作
        submitOperation: (data: object) => {
            setIsMonitoringTypeError(!Object.keys(paramsData.current).length)
            form.validateFields().then((data: object) => {
                Object.keys(paramsData.current).length && $Http("create", { typeName: "统计查询/评估报告", startTime: data["dateTime"][0], endTime: data["dateTime"][1], ...paramsData.current }).then((res) => {
                    message.success(res["success"])
                    props.change_cancel()
                })
            })
        }

    }

    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])


    return (
        <div className={lessModule["homePageStatisticalQueryPageAssessmentReportPageAddModalComponent"]}>
            <HomePage_ModalComponent_HeaderNormalComponent name="新建评估报告" padding="15px 24px" change_cancel={props.change_cancel} />
            <main className={lessModule["homePageStatisticalQueryPageAssessmentReportPageAddModalComponent-main"]}>
                <HomePage_ModalComponent_NormalFormComponent form={form} isHorizontal type="add" formItemList={formItemList} />
                <div className={lessModule["homePageStatisticalQueryPageAssessmentReportPageAddModalComponent-main__title"]}>选择站点</div>
                {
                    isMonitoringTypeError && <div className="homePage-required">请选择</div>
                }
                <HomePage_ModalComponent_SelectMonitorModalComponent isCard operation="安装" monitoringType="站点" mode="single" change_selectedOtherList={change_selectedOtherList} />
            </main>
            <HomePage_ModalComponent_NormalFooterComponent change_cancel={props.change_cancel} />
        </div>
    )
}
export default HomePage_StatisticalQueryPage_AssessmentReportPage_AddModalComponent